import React from 'react';
import Select from './index';
import Option from './Option';

import IMG1 from '../Input/bg.png';
import IMG2 from '../Input/bz.png';

export default function SetSelect(props) {
  return (
    <div>
      <div id="area">
        <h1>在特定盒子内</h1>
        <Select
          getPopupContainer={() => document.getElementById('area')}
          style={{ width: '220px', marginTop: '30px' }}
        >
          <Option prefix={<img src={IMG2} alt="" />} label="第一" value="1"></Option>
          <Option label="第二" value="2"></Option>
          <Option label="第三" value="3"></Option>
          <Option label="第四" value="4"></Option>
        </Select>
        <div className="areaClass"></div>
      </div>
      <h1>不在特定盒子内</h1>
      <Select style={{ width: '220px', marginTop: '30px' }}>
        <Option prefix={<img src={IMG2} alt="" />} label="第一" value="1"></Option>
        <Option label="第二" value="2"></Option>
        <Option label="第三" value="3"></Option>
        <Option label="第四" value="4"></Option>
      </Select>
      <h1>设置默认值</h1>
      <Select style={{ width: '220px', marginTop: '30px' }} defaultValue={'1'}>
        <Option prefix={<img src={IMG2} alt="" />} label="第一" value="1"></Option>
        <Option label="第二" value="2"></Option>
        <Option label="第三" value="3"></Option>
        <Option label="第四" value="4"></Option>
      </Select>
    </div>
  );
}
